<template>
  <div v-if="show" class="search-replace">
    <button class="search-replace-toggle" @click="clickToggle">
      <el-icon :style="{ transform: isReplace ? 'rotate(90deg)' : '' }"><i-ep-ArrowRight /></el-icon>
    </button>
    <div :style="{ height: isReplace ? '60px' : '30px' }" class="search-replace-main">
      <div class="search-box">
        <div class="search-main">
          <el-input v-model.trim="searchValue" size="small" placeholder="查找" @input="handleSearchInput"></el-input>
          <span>{{ props.resultCount > 0 ? props.resultCount + "个" : "无结果" }}</span>
        </div>
        <div class="search-handle">
          <!-- <el-icon><i-ep-Top /></el-icon> -->
          <!-- <el-icon><i-ep-Bottom /></el-icon> -->
          <el-icon @click="show = false"><i-ep-Close /></el-icon>
        </div>
      </div>
      <div class="replace-box">
        <el-input v-model.trim="replaceValue" size="small" placeholder="替换"></el-input>
        <MzIcon name="icon-replace" @click="handleReplace" />
        <!-- <MzIcon name="icon-replaceall" /> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 搜索替换功能组件
 */
import { ref, watch } from "vue";
import { useVModel } from "@vueuse/core";

interface Props {
  visible: boolean;
  resultCount: number;
}
const props = withDefaults(defineProps<Props>(), {
  visible: false,
  resultCount: 0
});
const emit = defineEmits(["update:visible", "onInput", "onReplace"]);

// 搜索值
const searchValue = ref("");
// 替换值
const replaceValue = ref("");
// 搜索查询状态，是否是替换装填
const isReplace = ref(false);

const show = useVModel(props, "visible", emit);

watch(
  () => props.visible,
  (e: boolean) => {
    isReplace.value = false;
    // 组件隐藏时，清空搜索和替换内容
    if (!e) {
      searchValue.value = "";
      replaceValue.value = "";
      emit("onInput", "");
    }
  }
);

// 点击替换展开缩回按钮，清空替换值
const clickToggle = () => {
  isReplace.value = !isReplace.value;
  replaceValue.value = "";
};

// 搜索值输入变化时，实时查询匹配
const handleSearchInput = (e: string) => {
  if (e) {
    emit("onInput", e);
  }
};
// 点击替换
const handleReplace = () => {
  if (searchValue.value && replaceValue.value) {
    emit("onReplace", searchValue.value, replaceValue.value);
  }
};
</script>

<style lang="scss" scoped>
.search {
  &-replace {
    position: absolute;
    top: 40px;
    right: 20px;
    border: 1px solid var(--el-border-color-light);
    border-top: none;
    padding-left: 20px;
    border-radius: 0px 0px 5px 5px;
    overflow: hidden;
    font-size: 12px;
    background-color: var(--el-bg-color-overlay);
    &-toggle {
      width: 20px;
      height: 100%;
      background-color: var(--el-bg-color-overlay);
      position: absolute;
      left: 0px;
      top: 0px;
      bottom: 0px;
      border: none;
      cursor: pointer;
      .el-icon {
        transition: 0.3s;
      }
      &:hover {
        background-color: var(--el-color-primary-light-9);
      }
    }
    &-main {
      width: 300px;
      transition: 0.3s;
      .el-input {
        width: 160px;
        margin-right: 5px;
      }
    }
  }
  &-box {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-main {
    display: flex;
    align-items: center;
  }
  &-handle {
    font-size: 16px;
    display: flex;
    align-items: center;
    .el-icon {
      cursor: pointer;
      margin-right: 5px;
      padding: 2px;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
.replace {
  &-box {
    height: 30px;
    display: flex;
    align-items: center;
    .mz-icon {
      font-size: 16px;
      margin-right: 10px;
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
